<!--
 * @Author: dxy 1776566541@qq.com
 * @Date: 2022-09-08 16:16:41
 * @LastEditors: dxy 1776566541@qq.com
 * @LastEditTime: 2022-09-08 16:23:11
 * @FilePath: \deng\src\components\MyMenu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEname
-->
<template>
  <div class="myMeny" id="myMenu">
    <ul>
      <li
        v-for="item in val"
        :key="item"
        :class="activeClass == item ? 'active' : ''"
        @click="mouseover($event, item)"
      >
        <router-link to>
          <slot :name="item"></slot>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['val'],
  name: 'MyMeny',
  data() {
    return {
      activeClass: 1
    }
  },
  methods: {
    mouseover(e, val) {
      this.activeClass = val
    }
  }
}
</script>

<style lang="less" scoped>
#myMenu li {
  float: left;
  margin-left: 30px;
}

#myMenu a:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

#myMenu .active a {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>
